---
title: 개발 툴바
description: Astro의 개발 툴바 사용 가이드
i18nReady: true
---

개발 서버가 실행되는 동안에는 로컬 브라우저 미리보기의 모든 페이지 하단에 개발 툴바가 포함되어 있습니다.

개발 툴바에는 개발 중 사이트를 디버깅하고 검사하는 데 유용한 여러 도구가 포함되어 있으며, 통합 디렉터리에서 [더 많은 개발 툴바 앱으로 확장](#개발-툴바-앱-확장)할 수 있습니다. [개발 툴바 API](/ko/reference/dev-toolbar-app-reference/)를 사용하여 나만의 앱을 만들 수도 있습니다!

이 툴바는 기본적으로 활성화되어 있으며 페이지 하단에 마우스를 올리면 나타납니다. 이는 개발자 도구로써만 사용되며 게시된 사이트에는 나타나지 않습니다.

## 내장된 앱

### Astro Menu

Astro Menu 앱은 현재 프로젝트에 대한 다양한 정보와 추가 리소스 링크에 쉽게 액세스할 수 있는 기능을 제공합니다. 특히, 한 번의 클릭으로 Astro 문서, GitHub 저장소 및 Discord 서버에 액세스할 수 있습니다.

이 앱에는 [`astro info`](/ko/reference/cli-reference/#astro-info) 명령을 실행하고 출력을 클립보드에 복사하는 "Copy debug info" 버튼도 포함되어 있습니다. 이 기능은 도움을 요청하거나 문제를 보고할 때 유용하게 사용할 수 있습니다.

### Inspect

Inspect 앱은 현재 페이지에 있는 모든 [아일랜드](/ko/concepts/islands/)에 대한 정보를 제공합니다. 여기에는 각 아일랜드에 전달된 속성과 렌더링에 사용되는 클라이언트 지시어가 표시됩니다.

### Audit

Audit 앱은 현재 페이지에서 일련의 감사를 자동으로 실행하여, 가장 일반적인 성능 및 접근성 문제를 확인합니다. 문제가 발견되면 도구 모음에 빨간색 점이 표시됩니다. 앱을 클릭하면 감사 결과 목록이 나타나고 관련 요소가 페이지에서 바로 강조 표시됩니다.

:::note

개발 툴바에서 수행되는 기본 성능 및 접근성 감사는 [Pa11y](https://pa11y.org/)나 [Lighthouse](https://developers.google.com/web/tools/lighthouse)와 같은 전용 도구로 대체할 수 없으며, 더 나아가서는 사람의 노력이 필요합니다!

개발 툴바는 다른 도구로 컨텍스트를 전환하지 않고도, 개발 중에 일반적인 문제를 빠르고 쉽게 파악할 수 있는 방법을 제공하는 것을 목표로 합니다.
:::

### Settings

Settings 앱을 통해 개발 툴바에서 자세한 로깅과 알림 비활성화와 같은 다양한 설정을 끄거나 켤 수 있습니다.

## 개발 툴바 앱 확장

Astro 통합은 새로운 앱을 개발 툴바에 추가하여 프로젝트에 특화된 사용자 정의 도구로 확장할 수 있습니다. 통합 디렉터리에서 [설치할 더 많은 개발 도구 앱](https://astro.build/integrations/?search=&categories%5B%5D=toolbar)을 찾거나 [Astro Menu](#astro-menu)를 사용할 수 있습니다.

프로젝트에 추가적인 개발 툴바 앱 통합을 설치하려면 다른 [Astro 통합](/ko/guides/integrations-guide/)과 마찬가지로 해당 설치 지침에 따라 설치할 수 있습니다.

## 개발 툴바 비활성화

개발 툴바는 기본적으로 모든 사이트에 대해 활성화되어 있습니다. 필요에 따라 개별 프로젝트 및/또는 사용자를 위해 비활성화할 수 있습니다.

### 프로젝트별

프로젝트에서 모든 사용자에게 개발 툴바를 비활성화하려면, [Astro 구성 파일](/ko/reference/configuration-reference/#devtoolbarenabled)에서 `devToolbar: false`로 설정하세요.

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})
```

다시 개발 툴바를 활성화하려면, 구성에서 이러한 줄을 제거하거나, `enabled:true`로 설정하세요.

### 사용자별

특정 프로젝트에서 사용자를 위해 개발 툴바를 비활성화하려면, [`astro preferences`](/ko/reference/cli-reference/#astro-preferences) 명령을 실행하세요.

```shell
astro preferences disable devToolbar
```

현재 기기에서 사용자의 모든 Astro 프로젝트에서 개발 툴바를 비활성화하려면 `astro-preferences`를 실행할 때 `--global` 플래그를 추가하세요:

```shell
astro preferences disable --global devToolbar
```

개발 툴바는 나중에 다음과 같이 활성화할 수 있습니다:

```shell
astro preferences enable devToolbar
```